<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>自动生成图表例子</title>


    <link rel="stylesheet" type="text/css" href="bower_components/easyui/jquery-easyui-1.5/themes/metro/easyui.css">
    <link rel="stylesheet" type="text/css" href="bower_components/easyui/jquery-easyui-1.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="bower_components/easyui/jquery-easyui-1.5/themes/color.css">
    <script type="text/javascript" src="bower_components/easyui/jquery-easyui-1.5/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/easyui/jquery-easyui-1.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="bower_components/echarts/dist/echarts.min.js"></script>

    <style>
        .left {
            width: 120px;
            margin: 20px auto;
        }

        .left table {
            background: #E0ECFF;
        }

        .left td {
            background: #eee;
        }

        .left td div {
            padding: 10px;
        }

        .right {
            width: 100%;
        }

        .right table {
            background: #E0ECFF;
            width: 100%;
        }

        .right td {
            background: #fafafa;
            color: #444;
            text-align: center;
            padding: 2px;
            height: 40px;
        }

        .right td {
            background: #E0ECFF;
        }

        .right td.drop {
            background: #fafafa;
            width: 100px;
        }

        .right td.over {
            background: #FBEC88;
        }

        .item {
            text-align: center;
            border: 1px solid #499B33;
            background: #fafafa;
            color: #444;
            width: 100px;
            margin-right: 4px;
            float: left;
        }

        .assigned {
            border: 1px solid #f6eedb;
            background: #f6eedb;
            outline: #f6eedb solid 1px;
        }

        .trash {
            background-color: red;
        }
    </style>


    <!--[DEMO:END-RESOURCES]-->

</head>

<body class="easyui-layout" fit="true">

<div data-options="region:'north'" style="height:50px;line-height: 25px;overflow: hidden;">
    <h1>自动生成图表</h1>
</div>
<div data-options="region:'south'" style="height:30px;line-height:5px;text-align: center;overflow: hidden;">
    <h3>技术栈：easyui+eCharts.js</h3>
</div>
<div data-options="region:'west',border:false" style="width:220px;">
    <div class="easyui-tabs" fit="true">
        <div title="我的数据">
            <div class="left">
                <h3>维度</h3>
                <table>
                    <tr>
                        <td>
                            <div class="item" data-options="id:1,name:'date'">日期</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item" data-options="id:2,name:'area'">区域</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item" data-options="id:3,name:'province'">省份</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item" data-options="id:4,name:'city'">城市</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item" data-options="id:5,name:'class'">产品类别</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item" data-options="id:6,name:'subclass'">产品子类别</div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="item" data-options="id:7,name:'way'">运输方式</div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>
<div data-options="region:'center',border:false">
    <div class="easyui-tabs" fit="true" data-options="border:false">
        <div title="拖拽模式">
            <div class="easyui-layout" fit="true" data-options="border:false">
                <div region="north" style="height: 50px;overflow: hidden;">
                    <div class="right">
                        <table style="width: 100%;">
                            <tr>
                                <td style="width: 5px">行</td>
                                <td class="drop"></td>
                                <td style="width: 5px">列</td>
                                <td class="drop"></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div region="center" data-options="border:false">
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="main" style="width: 100%;height:100%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var myChart;
    function fetchData(cb) {
        // 通过 setTimeout 模拟异步加载
        setTimeout(function () {
            cb({
                categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
                data: [5, 20, 36, 10, 10, 20]
            });
        }, 1000);
    }

    $(function () {
        $('.left .item').draggable({
            revert: true,
            proxy: 'clone'
        });

        $('.right td.drop').droppable({
            accept: '.item',
            onDragEnter: function () {
                $(this).addClass('over');
            },
            onDragLeave: function () {
                $(this).removeClass('over');
            },
            onDrop: function (e, source) {
                var opts = $(source).draggable('options');
                alert('名字：'+opts.name+',id:'+opts.id);
                $(this).removeClass('over');
                if ($(source).hasClass('assigned')) {
                    $(this).append(source);
                } else {
                    var c = $(source).clone().addClass('assigned');
                    $(this).append(c);
                    c.draggable({
                        revert: true
                    });
                }
            }
        });
        $('.left').droppable({
            accept: '.assigned',
            onDragEnter: function (e, source) {
                $(source).addClass('trash');
            },
            onDragLeave: function (e, source) {
                $(source).removeClass('trash');
            },
            onDrop: function (e, source) {
                $(source).remove();
            }
        });



        var dom = document.getElementById("main");
        myChart = echarts.init(dom);
        option = null;
        function fetchData(cb) {
            // 通过 setTimeout 模拟异步加载
            setTimeout(function () {
                cb({
                    categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
                    data: [5, 20, 36, 10, 10, 20]
                });
            }, 1000);
        }

        // 初始 option
        option = {
            title: {
                text: '异步数据加载示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: []
            }]
        };

        fetchData(function (data) {
            myChart.setOption({
                xAxis: {
                    data: data.categories
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '销量',
                    data: data.data
                }]
            });
        });
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }


    })











</script>
</body>
</html>